<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <FHeader />
      </el-header>
      <el-container>
        <el-aside :width="store.asideWidth">
          <FMenu />
        </el-aside>
        <el-main style="padding: 15px">
         <!-- <el-watermark :font="font" :content="['刘宁', '防伪的水印']"> -->
            <FTagList />
            <div class="main-content">
              <router-view v-slot="{ Component }">
                <transition name="fade">
                  <!-- 缓存 缓存最大页数 10 页 可配置 max -->
                  <keep-alive :max="10">
                    <component :is="Component"></component>
                  </keep-alive>
                </transition>
              </router-view>
            </div>
        <!-- </el-watermark> -->
       </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { defineComponent, ref, onMounted, reactive, watch } from 'vue'
import FHeader from './components/FHeader.vue'
import FMenu from './components/FMenu.vue'
import FTagList from './components/FTagList.vue'
import Watermark from '@/components/waterMark/index.vue'
import { useUserInfoStore } from '@/store'
import { isDark } from "@/composables";
const store = useUserInfoStore()

const browserHeight = ref(0)

const updateBrowserHeight = () => {
  browserHeight.value = window.innerHeight - 150
}
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

watch(
  isDark,
  () => {
    font.color = isDark.value
      ? 'rgba(255, 255, 255, .15)'
      : 'rgba(0, 0, 0, .15)'
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  updateBrowserHeight()
  window.addEventListener('resize', updateBrowserHeight)
})
</script>
<style scoped>
.main-content {
  padding: 0px;
  border-radius: 6px;
  height: auto;
  overflow-x: hidden;
  min-height: 80vh;
}
</style>
